<template>
	<view class="voice">
		<view class="voice-title">
			<text v-if="!isShowVoiceIcon">按住说话</text>
			<text v-else-if="isShowClose">松开取消发送</text>
			<text v-else>{{formatedRecordTime}}</text>
		</view>

		<view class="voice-con">

			<view class="voice-item voice-left"></view>
			<view class="voice-item voice-center">
				<view class="voice-icon">
					<view class="voice-img" @touchcancel="micTouchCancel" @touchmove="micTouchMove"
						@touchend="micTouchEnd" @touchstart="micTouchStart">
						<image :src="require('../static/img/tool/01.svg')"></image>
					</view>
				</view>
			</view>
			<view class="voice-item voice-right">
				<view class="voice-close" :class="[isShowClose?'voice-close-active':'']">
					<image v-if="!isShowClose" :src="require('../static/img/tool/02.svg')"></image>
					<image v-else :src="require('../static/img/tool/03.svg')"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var recordManager = null;
	var recordTimeInterval = null;

	import util from '../static/util.js'
	//var util = require('@/common/util.js')

	//引入网络请求
	import {
		uploadFile
	} from '@/api/http/common.js'

	export default {
		data() {
			return {
				isShowVoiceIcon: false,
				recordTime: 0,
				formatedRecordTime: "00:00:00",
				isRecording: false,
				windowWidth: 0,
				moveWidth: 0,
				isShowClose: false
			}
		},
		methods: {
			//获取当前页面宽度
			getPageWidth() {
				const res = uni.getSystemInfoSync();
				this.windowWidth = res.windowWidth
				//console.log(this.windowWidth)
				//获取页面六分之一宽度
				var moveWidth = parseFloat(res.windowWidth) / 6 * 5 - 20
				this.moveWidth = moveWidth
				//console.log(moveWidth)
			},

			startVoice() {
				this.$nextTick(() => {
					recordManager = uni.getRecorderManager()
					recordManager.onStart(() => {
						//展示语音动画
						this.isShowVoiceIcon = true
						recordTimeInterval = setInterval(() => {
							this.recordTime += 1;
							this.formatedRecordTime = util.formatTime(this.recordTime)

							if (this.recordTime > 10) {
								//结束计时
								clearInterval(recordTimeInterval)
								this.micTouchEnd()
							}
						}, 1000)
					})
					recordManager.onStop((res) => {
						if (this.isCancel) {
							this.formatedRecordTime = "00:00:00"
							this.isCancel = false
							this.recordTime = 0
						} else {
							if (this.recordTime < 1) {
								this.formatedRecordTime = "00:00:00"
								this.recordTime = 0
								//console.log('时间太短')
								uni.showToast({
									icon: 'none',
									title: '发送时间太短',
									duration: 1000
								})

							} else {
								//console.log(res.tempFilePath)
								this.formatedRecordTime = "00:00:00"

								uploadFile(res.tempFilePath).then(result => {
									if (result.data.pubInfo.code !== 0) {
										this.isShowClose = false
										this.isShowVoiceIcon = false;
										//归为时长
										this.recordTime = 0
										return uni.$showMsg(result.data.pubInfo.message);
									}
									//var  = result.data.busInfo
									let data = {
										voice: result.data.busInfo,
										time: this.recordTime,
										//标识是否执行
										anmitionPlay: false
									}
									//console.log(result.data.busInfo)
									this.$emit('sendMsgByUser', JSON.stringify(data), 3)
									//this.sendMsg(JSON.stringify(data), 3)
									//console.log(123)
									//归为时长
									this.recordTime = 0
								})
							}
						}
					})
				})
			},

			micTouchStart(e) {
				// #ifdef APP-PLUS
				plus.device.vibrate(50); //震动
				// #endif

				this.isRecording = true
				recordManager.start({
					format: 'mp3'
				})
			},
			micTouchMove(e) {
				//console.log(e)
				const pointX = e.touches[0].clientX
				if (pointX > this.moveWidth) {
					this.isShowClose = true
					this.isCancel = true
					// // #ifdef APP-PLUS
					// plus.device.vibrate(50); //震动
					// // #endif
				} else {
					this.isShowClose = false
					this.isCancel = false
					// // #ifdef APP-PLUS
					// plus.device.vibrate(50); //震动
					// // #endif
				}
			},
			micTouchCancel(e) {
				this.isRecording = false
				clearInterval(recordTimeInterval)
				recordManager.stop()
				this.isShowVoiceIcon = false;
				this.isShowClose = false
			},
			micTouchEnd(e) {
				this.isRecording = false
				clearInterval(recordTimeInterval)
				recordManager.stop()
				this.isShowVoiceIcon = false;
				this.isShowClose = false
			},
		},
		mounted() {
			//获取页面基本信息
			this.getPageWidth()

			//开启监听
			this.startVoice()
		}
	}
</script>

<style lang="scss" scoped>
	.voice {
		width: 100%;
		height: 300px;

		.voice-title {
			height: 100px;
			line-height: 100px;
			text-align: center;

			text {
				font-size: 32rpx;
				color: #78777F;
			}
		}

		.voice-con {
			display: flex;

			.voice-item {
				flex: 1;
			}


			.voice-center {
				position: relative;
				width: 100%;
				height: 150px;

				.voice-icon {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				.voice-img {
					position: relative;
					width: 90px;
					height: 90px;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
					// background-color: #04B1F8;

					background-image: radial-gradient(#B2EAFF, #04B1F8, #149EED);
					text-align: center;
					border: 20rpx solid #B2EAFF;

					image {
						margin-top: 10px;
						width: 70px;
						height: 70px;
					}

					// &:active {
					// 	border: 25rpx solid #B2EAFF;
					// }

					/* &::before,
					&::after {
						content: '';
						width: 90px;
						height: 90px;
						display: block;
						border: 1px solid #B2EAFF;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						border-radius: 50%;
					}

					&::before {
						animation: rotate 1s linear infinite;
					}

					&::after {
						animation: rotate 1s 1s linear infinite;
					}

					@keyframes rotate {
						0% {
							width: 90px;
							height: 90px;
							opacity: 1;
						}

						100% {
							width: 100px;
							height: 100px;
							opacity: 0;
						}
					} */

					/* &::before {
						content: "";
						position: absolute;
						width: 100px;
						height: 120%;
						background: linear-gradient(#00ccff, #d500f9);
						
						&:active {
							animation: rotate 1s linear infinite;
						}

					}

					&::after {
						content: "";
						position: absolute;
						// background: #0e1538;
						inset: 5px;
						border-radius: 20px;
					}

					

					@keyframes rotate {
						from {
							transform: rotate(0deg);
						}

						to {
							transform: rotate(360deg);
						}
					} */
				}


			}

			.voice-right {
				position: relative;
				width: 100%;

				.voice-close {
					text-align: center;
					position: absolute;
					left: 50%;
					transform: translate(-50%, 0);

					image {
						width: 20px;
						height: 20px;
						margin-top: 15px;
					}
				}

				.voice-close-active {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					background-color: red;
				}
			}


		}
	}
</style>